import React, {useEffect, useState} from "react";
import {createStyles} from "antd-style";
import FileBucketApi, {FbInfo} from "@/api/web/FileBucketApi.ts";
import {Pagination} from "antd";
import {BreakPoints} from "@/common/profiles.ts";
import useAppState from "@/store/AppState.ts";
import {getDefaultPageParam, PageParam, Res} from "@/api/objects";
import FileBucketCard from "../../../components/FileBucketCard.tsx";
import UserApi, {UserDto} from "@/api/web/UserApi.ts";
import {PageList} from "@/AppRouter.tsx";
import {useNavigate} from "react-router";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            display: grid;
            gap: 10px;
            padding: 10px;
        `,
    }
})

const FileBucketView = () => {
    const {styles} = useStyles()
    const [fbInfoList, setFbInfoList] = useState<FbInfo[]>([])
    const [total, setTotal] = useState<number>(0)
    const [pageParam, setPageParam] = useState<PageParam>(getDefaultPageParam(10))
    const [users, setUsers] = useState<Map<string, UserDto>>(new Map())
    const width = useAppState(state => state.width)
    const navigate = useNavigate();

    useEffect(() => {
        FileBucketApi.pageFbInfo(pageParam.current, pageParam.size).then(res => {
            if (res.data.size != pageParam.size || res.data.current != pageParam.current) return;
            const fbInfos = res.data.records;
            const set = new Set(fbInfos.map(item => item.creatorId));
            const promiseList: Promise<Res<UserDto>>[] = []
            set.forEach(item => {
                promiseList.push(UserApi.getUserById(item))
            })
            Promise.all(promiseList).then(res => {
                const map = new Map()
                res.map(item => item.data)
                    .forEach(item => map.set(item.id, item))
                setUsers(map)
            })
            setFbInfoList(fbInfos)
            setTotal(res.data.total)
        })
    }, [pageParam]);

    return (
        <>
            <div>
                <Pagination
                    total={total}
                    current={pageParam.current}
                    pageSize={pageParam.size}
                    onChange={(current, size) => {
                        setPageParam({...pageParam, current, size})
                    }}
                    showQuickJumper
                    showSizeChanger
                />
            </div>
            <div className={styles.container}
                // 在这里条不同宽度的显示数量
                 style={{
                     gridTemplateColumns: width > BreakPoints.large ?
                         "repeat(4, 1fr)" : width < 600 ?
                             "repeat(1, 1fr)" : "repeat(3, 1fr)",
                 }}
            >
                {
                    fbInfoList.map(item => {
                        return (
                            <FileBucketCard key={item.id}
                                            fbInfo={item}
                                            userDto={users.get(item.creatorId)}
                                            onClick={() => {
                                                navigate(PageList.FbPage + "/" + item.id)
                                            }}
                            />
                        )
                    })
                }
            </div>
        </>
    )
}

export default FileBucketView
